<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<link rel="stylesheet" href="/css/main.css"/>
		<script>
			init = function() {
				document.getElementById('headline').innerText = chrome.i18n.getMessage('headline');
				document.getElementById('label_urls').innerText = chrome.i18n.getMessage('tabs') + ':';
				document.getElementById('label_url').innerText = chrome.i18n.getMessage('url') + ':';
				document.getElementById('url').placeholder = chrome.i18n.getMessage('url_example');

				urlsSelect();

				chrome.windows.getCurrent(function(w) {
					wid = w.id;
					chrome.tabs.getSelected(wid, function(t) {
						if (t.url.substr(0, 7) == 'http://' || t.url.substr(0, 8) == 'https://') {
							document.getElementById('url').value = t.url;
							getHeaders();
						}
					});
				});

				document.getElementById('urls').addEventListener('change', function(event) {
					document.getElementById('url').value = this.value.replace(/(<([^>]+)>)/ig,"");
					this.selectedIndex = 0;
					clearError();
					getHeaders();
				}, false);

				document.getElementById('url').addEventListener('keyup', function(event) {
					if (event.keyCode != 13) {
						document.getElementById('result').style.display = 'none';
						clearError();
					}
				}, false);

				delete init;
			}

			isValidUrl = function(url) {
				if (url.substr(0, 7) == 'http://' || url.substr(0, 8) == 'https://') {
					return true;
				} else {
					return false;
				}				
			}

			urlsSelect = function() {
				chrome.windows.getAll({'populate': true}, function(windows) {
					windows.forEach(function(w) {
						w.tabs.forEach(function(t) {
							if (isValidUrl(t.url) == true) {
								document.getElementById('urls').innerHTML += '<option>'+String(t.url).replace(/(<([^>]+)>)/ig,"")+'</option>';
							}
						});
					});
				});
			}

			showError = function(type) {
				document.getElementById('loading').style.display = 'none';
				document.getElementById('loading').value = 0;
				document.getElementById('result').style.display = 'none';
				document.getElementById('result').innerText = '';
				document.getElementById('error').innerText = chrome.i18n.getMessage(type);
				document.getElementById('error').style.backgroundImage = 'url(/images/'+type+'.png)';
				document.getElementById('error').style.display = 'block';
			}

			clearError = function() {
				document.getElementById('error').style.display = 'none';
				document.getElementById('error').innerText = '';
			}

			getHeaders = function() {
				document.getElementById('result').style.display = 'none';
				document.getElementById('result').innerText = '';

				var url = document.getElementById('url').value;

				if (url != '') {
					if (isValidUrl(url) == true) {
						document.getElementById('loading').style.display = 'block';
						var xhr = new XMLHttpRequest();
						xhr.open('GET', url, true);
						xhr.onreadystatechange = function() {
							document.getElementById('loading').value = xhr.readyState;
							if (xhr.readyState == 4) {
								document.getElementById('loading').value = xhr.readyState;
								document.getElementById('loading').style.display = 'none';
								document.getElementById('loading').value = 0;
								switch (xhr.status) {
									case 0:
										showError('domain_not_found');
										break;
									default:
										var headers = xhr.getAllResponseHeaders().split("\n");
										if (headers.length > 0 && headers[0] != '') {
											var headers_table = '<table><caption>'+chrome.i18n.getMessage('http_request_status')+': '+String(xhr.status).replace(/(<([^>]+)>)/ig,"")+' ('+xhr.statusText.replace(/(<([^>]+)>)/ig,"")+')</caption><thead><tr><th>'+chrome.i18n.getMessage('name')+'</th><th>'+chrome.i18n.getMessage('value')+'</th></tr></thead>';
											headers.forEach(function(line) {
												if (line != '') {
													header_name = line.substring(0, line.indexOf(': '));
													header_value = line.substring(line.indexOf(': ')+2, line.length-1);
													headers_table += '<tr><td nowrap="nowrap">' + header_name.replace(/(<([^>]+)>)/ig,"") + '</td><td width="100%">' + header_value.replace(/(<([^>]+)>)/ig,"") + '</td></tr>';
												}
											});
											headers_table += '</table>';
											document.getElementById('result').innerHTML = headers_table;
											document.getElementById('result').style.display = 'block';
										} else {
											showError('network_error');
										}
										break;
								}
							}
						}
						xhr.send();
					} else {
						showError('url_not_valid');
					}
				}
			}
		</script>
	</head>
	<body onload="init()">
		<h1 id="headline"></h1>
		<form id="form_url" onsubmit="getHeaders(); return false;">
			<p>
				<label for="urls" id="label_urls"></label>
				<select id="urls"/>
					<option></option>
				</select>
			</p>
			<p>
				<label for="url" id="label_url"></label>
				<input type="text" id="url"/>
			</p>
			<p>
				<label>&nbsp;</label>			
				<input type="submit" id="button_submit"/>
			</p>
		</form>
		<progress id="loading" value="0" max="4"></progress>
		<div id="result"></div>
		<div id="error"></div>
	</body>
</html>